<template>
	<div class="page">
		<div class="page-header">
			<img class="page-header__banner" src="~@/assets/images/school-banner.png" alt="banner">
			<div class="page-header__bd">
				<h1 class="page-name">{{ $route.meta.title }}</h1>
			</div>
		</div>
		<div class="page-bd">
			<div class="diffSection">
				<div class="diffSection-left">
					<el-dropdown class="modify-dropdown">
						<el-row type="flex" align="middle">
							<span class="diffSection-title" style="margin-right: 10px;">{{ diffLeft.schoolCode }}  {{ diffLeft.schoolName }}</span>
							<i style="color: #ccc;" class="el-icon-caret-bottom"></i>
						</el-row>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="item in collectList" :key="item.id">
								<el-row type="flex" align="middle" style="min-width: 89px;">
									<span @click="onClickCollectItem(item, 'diffLeft')" style="flex: 1; margin-right: 10px;">{{ item.name }}</span>
									<i @click.stop="onCancelCollectItem(item)" style="flex-shrink: 0; line-height: 1;" class="el-icon-delete"></i>
								</el-row>
							</el-dropdown-item>
							<el-dropdown-item v-if="collectList.length === 0">暂无数据</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="diffSection-middle">
					<img class="icon-diff" src="~@/assets/images/school-diff.png" alt="">
				</div>
				<div class="diffSection-right">
					<el-dropdown class="modify-dropdown">
						<el-row type="flex" align="middle">
							<span class="diffSection-title" style="margin-right: 10px;" v-if="diffRight.schoolCode">
								{{ diffRight.schoolCode }} {{ diffRight.schoolName }}
							</span>
							<span v-else class="diffSection-title" style="margin-right: 10px;">请选择</span>
							<i style="color: #ccc;" class="el-icon-caret-bottom"></i>
						</el-row>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="item in collectList" :key="item.id">
								<el-row type="flex" align="middle" style="min-width: 89px;">
									<span @click="onClickCollectItem(item, 'diffRight')" style="flex: 1; margin-right: 10px;">{{ item.name }}</span>
									<i @click.stop="onCancelCollectItem(item)" style="flex-shrink: 0; line-height: 1;" class="el-icon-delete"></i>
								</el-row>
							</el-dropdown-item>
							<el-dropdown-item v-if="collectList.length === 0">暂无数据</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.nature | nature2CN }}</div>
				<div class="diffSection-middle">办学属性</div>
				<div class="diffSection-right">{{ diffRight.nature | nature2CN }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.collegeLevel | collegeLevel2CN }}</div>
				<div class="diffSection-middle">院校层级</div>
				<div class="diffSection-right">{{ diffRight.collegeLevel | collegeLevel2CN }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.schoolType || '' }}</div>
				<div class="diffSection-middle">院校类别</div>
				<div class="diffSection-right">{{ diffRight.schoolType || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.manager || '' }}</div>
				<div class="diffSection-middle">主管部门</div>
				<div class="diffSection-right">{{ diffRight.manager || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.schoolSort || '' }}</div>
				<div class="diffSection-middle">院校排名</div>
				<div class="diffSection-right">{{ diffRight.schoolSort || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.schoolAddress || '' }}</div>
				<div class="diffSection-middle">院校地址</div>
				<div class="diffSection-right">{{ diffRight.schoolAddress || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left" v-html="diffLeft.firstDiscipline || ''"></div>
				<div class="diffSection-middle">一流学科</div>
				<div class="diffSection-right" v-html="diffRight.firstDiscipline || ''"></div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" v-html="diffLeft.countryMajor || ''"></div>
				<div class="diffSection-middle">国家特色专业</div>
				<div class="diffSection-right" v-html="diffRight.countryMajor || ''"></div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left" v-html="diffLeft.provinceMajor || ''"></div>
				<div class="diffSection-middle">省级特色专业</div>
				<div class="diffSection-right" v-html="diffRight.provinceMajor || ''"></div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" v-html="diffLeft.masterMajor || ''"></div>
				<div class="diffSection-middle">硕士点专业</div>
				<div class="diffSection-right" v-html="diffRight.masterMajor || ''"></div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" v-html="diffLeft.doctorMajor || ''"></div>
				<div class="diffSection-middle">博士点专业</div>
				<div class="diffSection-right" v-html="diffRight.doctorMajor || ''"></div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">
					<template v-if="diffLeft.admissionSchool">
						<div v-for="(item, index) in diffLeft.admissionSchool" :key="index">
							<div class="text-left" style="padding: 19px 0; font-weight: 600;">{{ item.batch }} {{ item.code }}</div>
							<el-table :data="item.admissionData" class="modify-table">
								<el-table-column width="75" label="" align="center">
									<template slot-scope="scope">
										{{ scope.row.type | specialityType2CN }}
									</template>
								</el-table-column>
								<el-table-column width="130" align="left">
									<template slot-scope="scope">
										<div>计划数 | 录取数</div>
										<div style="padding: 20px 0;">投档线</div>
										<div>投档位次</div>
									</template>
								</el-table-column>
								<el-table-column :label="nowYear - 2 + '年'" align="center" prop="toudang2019" >
									<template slot-scope="scope">
										<div>{{ scope.row.toudang2019 }}</div>
										<div style="padding: 20px 0;">{{ scope.row.shiftLine2019 }}</div>
										<div>{{ scope.row.ranking2019 }}</div>
									</template>
								</el-table-column>
								<el-table-column :label="nowYear - 1 + '年'" align="center" prop="toudang2020" >
									<template slot-scope="scope">
										<div>{{ scope.row.toudang2020 }}</div>
										<div style="padding: 20px 0;">{{ scope.row.shiftLine2020 }}</div>
										<div>{{ scope.row.ranking2020 }}</div>
									</template>
								</el-table-column>
								<el-table-column :label="nowYear + '年'" align="center" prop="toudang2021" >
									<template slot-scope="scope">
										<div>{{ scope.row.toudang2021 }}</div>
										<div style="padding: 20px 0;">{{ scope.row.shiftLine2021 }}</div>
										<div>{{ scope.row.ranking2021 }}</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</template>
				</div>
				<div class="diffSection-middle">录取数据</div>
				<div class="diffSection-right">
					<template v-if="diffRight.admissionSchool">
						<div v-for="(item, index) in diffRight.admissionSchool" :key="index">
							<div class="text-left" style="padding: 19px 0; font-weight: 600;">{{ item.batch }} {{ item.code }}</div>
							<el-table :data="item.admissionData" class="modify-table">
								<el-table-column width="75" label="" align="center">
									<template slot-scope="scope">
										{{ scope.row.type | specialityType2CN }}
									</template>
								</el-table-column>
								<el-table-column width="130" align="left">
									<template slot-scope="scope">
										<div>计划数 | 录取数</div>
										<div style="padding: 20px 0;">投档线</div>
										<div>投档位次</div>
									</template>
								</el-table-column>
								<el-table-column :label="nowYear - 2 + '年'" align="center" prop="toudang2019" >
									<template slot-scope="scope">
										<div>{{ scope.row.toudang2019 }}</div>
										<div style="padding: 20px 0;">{{ scope.row.shiftLine2019 }}</div>
										<div>{{ scope.row.ranking2019 }}</div>
									</template>
								</el-table-column>
								<el-table-column :label="nowYear - 1 + '年'" align="center" prop="toudang2020" >
									<template slot-scope="scope">
										<div>{{ scope.row.toudang2020 }}</div>
										<div style="padding: 20px 0;">{{ scope.row.shiftLine2020 }}</div>
										<div>{{ scope.row.ranking2020 }}</div>
									</template>
								</el-table-column>
								<el-table-column :label="nowYear + '年'" align="center" prop="toudang2021" >
									<template slot-scope="scope">
										<div>{{ scope.row.toudang2021 }}</div>
										<div style="padding: 20px 0;">{{ scope.row.shiftLine2021 }}</div>
										<div>{{ scope.row.ranking2021 }}</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="fixed-handle">
			<div @click="$router.go(-1)" class="fixed-handle__back">返回</div>
		</div>
	</div>
</template>

<script>
import { request } from "@/util/request.js"

export default {
	data() {
		return {
			nowYear: '',
			diffLeft: {},
			diffRight: {},
			collectList: []
		}
	},
	created() {
		let diffLeftCode = this.$route.query.code
		this.getDiffDetail(diffLeftCode, 'diffLeft')
		this.getCollectList().then(res => {
			if (!this.collectList.length) return

			// 选中收藏列表第一个 如果右 === 左 则取下一个
			if (this.collectList.length > 0) {
				let diffRightCode = this.collectList[0].code
				if (this.collectList.length > 1) {
					diffRightCode = diffLeftCode !== this.collectList[0].code
														? this.collectList[0].code
														: this.collectList[1].code
				}
				this.getDiffDetail(diffRightCode, 'diffRight')
			}
		})

		this.$api.getDict({ dictType: "data_year" }).then(res => {
			if (![0, 200].includes(res.code)) {
				return this.$message.error(res.msg)
			}
			res.data.forEach(item => {
				if(item.dictName === 'now'){
					this.nowYear = item.dictValue
				}
			})
		})
	},

	filters: {
		nature2CN(type) {
			return {
				1: '公办',
				2: '民办',
				3: '合办',
			}[type] || type
		},
	},

	methods: {
		getDiffDetail(code, diffType) {
			request({
				method: 'get',
				url: 'SchoolIntroduction/getSchoolDetail',
				params: {
					code,
				}
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this[diffType] = res.data
			})
		},

		getCollectList() {
			return this.$api.getCollectList({
				pageNum: 1,
				pageSize: 500,
				type: 1, // 收藏类型 1:学校 2:专业
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					this.$message.error(res.msg)
					return Promise.reject(res)
				}
				this.collectList = res.data.list
				return res
			})
		},

		onClickCollectItem(item, diffType) {
			this.getDiffDetail(item.code, diffType)
		},

		onCancelCollectItem(item) {
			this.$confirm(`确定删除该收藏？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				return this.$store.dispatch('setCollectStatus', {
					action: 'cancel',
					params: [
						{ code: item.code, type: item.type, }
					]
				})
			}).then(res => {
				this.getCollectList()
			})
		},
	}
}

</script>
<style lang="stylus" scoped>
.fixed-handle
	position fixed
	right: 20px;
	top: 200px;
	&__back
		display flex
		align-items center
		justify-content center
		cursor pointer
		color: white;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		font-size: 15px;
		text-align: center;
		background-color: orange;
.page
	font-size: 15px;
	background: #F9F9F9;
	&-bd
		width BodyMaxWidth
		margin 10px auto 60px auto
		uiBlock();
		padding 32px 22px 39px 22px
		box-sizing border-box

.page-header
	width: 100%;
	height: 260px;
	position relative
	&__banner
		width 100%
		height 100%
		object-fit: cover;
		position absolute
		top 0
		left 0
	&__bd
		text-align center
		padding 100px 0 0 0
		position relative
		z-index 1
		width BodyMaxWidth
		margin 0 auto
		box-sizing border-box
.page-name
	margin 0
	font-size: 50px;
	font-weight: normal;
	color: #fff;
	line-height: 48px;
	text-shadow: 0px 4px 4px rgba(121, 68, 2, 0.1);

.icon-diff
	width 100%
	position absolute
	top 0
	left 0
	z-index 1
	pointer-events: none;
.diffSection
	display flex
	box-sizing border-box
	font-size: 16px;
	line-height 30px
	font-weight: 400;
	color: #333;
	text-align center
	border-radius: 6px;
	&-title
		font-size: 20px;
		font-weight: PingFangMedium500;
		cursor pointer
	// &:first-child
	// 	^[0]-left, ^[0]-right
	// 		display flex
	// 		align-items center
	// 		justify-content center
	&:nth-child(odd)
		background BackgroundStripe
	&-left
		flex 1
		padding 15px 42px 15px 42px
	&-middle
		width 147px
		flex-shrink 0
		background: #EAF3E9;
		padding 15px 0
		position relative
		display: flex;
		align-items: center;
		justify-content: center;
	&-right
		flex 1
		padding 15px 42px 15px 42px
	.modify-dropdown
		vertical-align middle

.modify-table
	&::before
		display none
	/deep/
		th.el-table__cell, tr
			background #f9f9f9
		th.el-table__cell, td.el-table__cell
			border none
			& > .cell
				line-height 16px
				font-size: 16px;
				color: #333333;
				font-weight normal

.text-left
	text-align left
</style>
